<template>
    <div class="home"  id="home"  @click="login">
      <div class="big" >
          <div class="nav">
            <el-menu :mode="mode" :router="true">
                <el-menu-item index="/">
                    <el-icon><i-ep-menu/></el-icon>
                    <span>首页</span>
                </el-menu-item>
                <el-menu-item index="/wordcloud">
                    <el-icon><i-ep-Search/></el-icon>
                    <span>词云</span>
                </el-menu-item>
                <el-sub-menu index="1">
                    <template #title>
                        <el-icon><i-ep-PieChart/></el-icon>
                        <span>类型</span>
                    </template>
                    <el-menu-item index="/types">
                        类型占比
                    </el-menu-item>
                    <el-menu-item index="/tandp" >
                        类型与盈利
                    </el-menu-item>
                    <el-menu-item index="/tandg">类型与评分</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="2">
                    <template #title>
                        <el-icon><i-ep-Film/></el-icon>
                        <span>票房</span>
                    </template>
                    <el-menu-item index="/top100">票房前百</el-menu-item>
                    <el-menu-item index="/calender">历年票房</el-menu-item>

                </el-sub-menu>
                <el-menu-item >
                    <el-icon><i-ep-Orange/></el-icon>
                        <span>国家</span>
                </el-menu-item>
                <el-menu-item index="/self">
                    <el-icon><i-ep-Setting/></el-icon>
                    <span>个人设置</span>
                </el-menu-item>
            </el-menu>
        </div>
        <div class="show" ref="show">
            <router-view></router-view>
        </div>
      </div>

    </div>
</template>


<script lang="ts">


import { ref, onBeforeMount, watch, onMounted, reactive } from 'vue'
import { reqhome } from '../api';
import { Sunny, Moon } from '@element-plus/icons-vue'
import { objectExpression } from '@babel/types';

import { useSettingStoreHook } from "@/store/modules/settings";
import { storeToRefs } from "pinia";
import { useRouter } from "vue-router";

export default {
    name:'main',
    setup(){

     const store = useSettingStoreHook();
     const router = useRouter();
    const { fixedHeader, title,username } = storeToRefs(store);
      //
function login(){
  // 判断是否登录，未登录跳转到登录页
    if(username.value.length!=0){
        console.log("已经登录")
        return
     }
     console.log("还未登陆")
    console.log(username.value)
     if(username.value=="111"){
           console.log("没有用户，重定向登录页")
             router.push({
               path:"/login",
                 query:{
                   id:'12'
                 }
                  });
     }

}

function test(){
  console.log("还未登陆")
  console.log(title.value)
    title.value='123'
  console.log(title.value)
  console.log("还未登陆")
    // store.CHANGE_SETTING({'title':any,"settings"})
  console.log(title)

}
        return {
      fixedHeader,
      title,login,test
    };
        }


}

// 导航栏方向
let mode = ref('vertical')

// 定义一个监听屏幕的属性
let ScreenWidth = ref()

// 生命周期钩子，添加页面宽度事件绑定
onBeforeMount(() => {
    window.onresize = () => {
        ScreenWidth.value = document.body.clientWidth
    }
})

// 监听尺寸变化
watch(ScreenWidth, (n, o) => {
    if (n > 960) {
        mode.value = 'vertical'
    } else {
        mode.value = 'horizontal'
    }
})

</script>




<style lang="scss" scoped>

.big{
   background: url("../assets/xumi.jpg");
      background-size: 100% 100%;
        background-color: darkblue;
        height: 750px;
        width: 1000px;
    }

.home {
  background: url("../assets/xumi.jpg");
      background-size: 100% 100%;
    height: 100%;
    display: flex;
    .nav {
        background-color: #535bf2;
      float: left;
    }
    .show{
        //opacity: 40%;

        background-color: #6bf253;
      float: right;
      height: 550px;
    }


}

@media screen and (min-width:960px) {
    .home {
        flex-direction: row;
        .show {
            width: 85%;
        }

        .nav {
            width: 15%;
        }
    }
}

@media screen and (max-width:960px) {
    .home {
        flex-direction: column;

        .show {
            height: 90%;
        }

        .nav {
            height: 10%;

        }
    }
}
</style>